<template>
  <div>
    <Header/>
    <div class="backred">
      <div class="sidebar">
        <div class="list">
          <div class="shanpi">
            <div class="shanpiimg"><img src="@/assets/img/aa.png" alt=""></div>
            <div class="shanmtxt">
              <h4>兰蔻粉水400ml 清滢柔肤水 补水保湿舒缓</h4>
              <div class="fax anghon">
                <p>市场指导价：<span>1514</span> 元</p>
                <p>活动名额：<span>12</span> 人</p>
              </div>
              <div class="fax anghon1">
                <div><p> 申领条件：</p></div>
                <div>
                  <p>1.20-40岁女性</p>
                  <p>2.湖北地区</p>
                  <p> 3.申请成功无需支付邮费</p>
                  <p>  4.申请成功需提交真实原创体验报告</p>
                  
                </div>
              </div>
              <div class="fax aaaa">
                <p>已申请: <span>2635</span> 人</p>
              </div>
              <p class="afagaa">距离活动结束：<span>6</span> 天 <span>10</span> 小时 <span>20</span> 分</p>

              <div class="fax coee">
                
                <div class="div2" @click="onliji">立即申请</div>
              </div>
            </div>
          </div>
          <div class="tabe">
            <el-tabs v-model="activeName" @tab-click="handleClick">
              <el-tab-pane label="体验须知" name="first">
                <div class="cingcai">申请流程</div>
                <div class="lc_c">
                  <div>01<br>进入免费体验</div>
                  <div>02<br>查看申领条件</div>
                  <div>03<br>点击免费申请</div>
                  <div>04<br>申请成功</div>
                  <div>05<br>填写体验报告</div>
                </div>
                <div class="cingcai">申请须知</div>
                <div class="adadw">
                  <ul>
                    <li>本活动为免费申请，体验过程无需支付任何费用</li>
                    <li>申请成功名单在活动结束三天内公布，我们将通过系统消息通知到您</li>
                    <li>申请成功后，可进入个人中心查看物流情况</li>
                    <li>收到货后，您须如实提交真实体验报告，无需返还体验商品</li>
                    <li>体验报告提出产品改进意见可增加评优概率</li>
                    <li>优秀体验报告可以提升您下一次申请成功几率，劣质报告将导致你被限制申请</li>
                    <li>体验者在申请试用的同时即表示承担试用品质量、物流、设计缺陷等产品问题的风险</li>
                    <li>体验产品非消费者直接现金或通过支付行为购买所得，故试用品试用者非商品消费者，暂不享受《消费者保护法》7天包退等未列举的义务服务</li>
                  </ul>
                </div>
              </el-tab-pane>
              <el-tab-pane label="申请名单(4312人)" name="second">
                <div class="list_b">
                  <div class="list_con">
                    <div>
                      <div class="list_ons">
                        <img src="@/assets/img/aa.png" alt="">
                        <p>12312331</p>
                        <p>weqweqe</p>
                        <p>12312312</p>
                      </div>
                      <div class="list_ons">
                        <img src="@/assets/img/aa.png" alt="">
                        <p>12312331</p>
                        <p>weqweqe</p>
                        <p>12312312</p>
                      </div>
                    </div>
                    <div>
                      <div class="list_ons">
                        <img src="@/assets/img/aa.png" alt="">
                        <p>12312331</p>
                        <p>weqweqe</p>
                        <p>12312312</p>
                      </div>
                      <div class="list_ons">
                        <img src="@/assets/img/aa.png" alt="">
                        <p>12312331</p>
                        <p>weqweqe</p>
                        <p>12312312</p>
                      </div>
                    </div>
                  </div>
                </div>
              </el-tab-pane>
              <!-- 真正进行没有中奖名单6.10 -->
              <!-- <el-tab-pane label="中奖名单(10人)" name="third">
                <div class="list_c">
                  333333
                </div>
              </el-tab-pane> -->
            </el-tabs>
          </div>
          <div class="conezhan">
            <div class="sango">商品展示</div>
            <div class="sahngimg">
               <img src="@/assets/img/产品详情介绍4.png" alt="">
               <img src="@/assets/img/产品详情介绍5.png" alt="">
               <img src="@/assets/img/产品详情介绍6.png" alt="">
            </div>
          </div>
        </div>
        <Advertisement/>
      </div>
    </div>
    <Footer/>
  </div>
</template>   
<script>
import Header from '@/components/Header'
import Footer from '@/components/Footer'
import Advertisement from '@/components/Advertisement'
export default {
  name: 'detail', 
  components: { 
    Header,
    Footer,
    Advertisement
  },
  data () {
    return {
      activeName: 'first'
    }
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
    onliji(){
       this.$router.push({
        path: "/details11"
      });
    },
  }
}
</script> 
<style scoped lang="stylus">
.tabe >>>.el-tabs__item.is-active {
  color:#f3806d;
}
.tabe >>>.el-tabs__item:hover{
  color:#f3806d;
}
.tabe >>>.el-tabs__item.is-active{
  color:#f3806d;
}
.tabe >>>.el-tabs__active-bar {
  background-color:#f3806d;
}
.tabe >>>.el-tabs__nav-scroll {
  background-color:#eee;
  margin-left: 10px
}
.backred {
  background-color: #f06048;
  display: flex;
  justify-content: space-between;
}
.sidebar {
  width: 1200px;
  margin: 5px auto;
  background-color: #ffffff;
  display: flex;
  justify-content: space-between;
}
.list {
  width: 1000px;
}
.shanpi {
  width: 875px;
  height: 300px;
  margin: 25px auto;
  display: flex;
  justify-content: space-between;
}
.tabe {
  width: 895px;
  margin: 0 auto;
}
.conezhan {
  width: 875px;
  margin: 0 auto;
}
.sango {
  line-height: 40px;
  background-color:#eee;
}
.sahngimg {
  width: 875px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding-bottom:50px
}
.shanpiimg{
  width:300px;
  height:300px
}
.shanpiimg img{
  width:300px;
  height:300px
}
.shanmtxt {
  width: 570px;
  margin-left:20px

}
.list_b {
  width: 895px;
  height:430px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
}
.list_c {
  width: 920px;
  height:430px;
  margin: 0 auto;  
}
.tabe .cingcai {
	width: 136px;
	line-height:36px;
  text-align: center;
	background-color: #f06048;
	border-radius: 4px;
  margin: 0 auto;
  font-size: 24px;
  color: #fff;
}

.tabe .lc_c{
  width: 850px;
	height: 58px;
  display: flex;
  justify-content: space-between;
  margin:30px auto;
}
.lc_c div {
  width: 125px;
	height: 58px;
  line-height:27px
  text-align: center;
	border: dashed 1px #f06048;
  font-family: SourceHanSansCN-Regular;
	font-size: 16px;
	font-weight: normal;
	font-stretch: normal;
}
.adadw ul {
  width:850px;
  margin: 0 auto;
  line-height:24px
}
.adadw li{
  color: #898989;
  font-size: 16px;
}
.adadw li:before {
  width:15px;
  height:15px;
  background-color:#f06048;
  transform:rotate(90deg);
}
.fax {
  display: flex;
  justify-content: space-between;
}
.shanmtxt h4{
  font-size:24px;
  color:#313131;
}
p {
  color:#a0a0a0
}
.shanmtxt .anghon {
  width:300px;
  line-height: 50px;
}
.shanmtxt .anghon span {
  font-size: 24px;
  color: red;
  font-weight: 600
}
.shanmtxt .anghon1 {
    width: 314px;
    height: 100px;
} 
.shanmtxt .aaaa {
  margin-bottom: 10px
}
.shanmtxt .aaaa span {
  font-size: 24px;
  color: #f00;
  font-weight: 600;
}
.coee .div1 {
  width: 400px;
	line-height: 71px;
	background-color: #f06048;
  font-size: 18px;
  color: #fff;
  text-align: center;
}
.coee .div1 span {
  font-size: 22px
}
.coee .div2{
  width: 280px;
	line-height: 60px;
  background-color: #f06048;
  font-size: 24px;
  color: #fff;
  text-align: center;
  margin 0 auto
  cursor pointer
}
.list_con {
  width:840px;
  height:430px;
  display:flex;
  justify-content: space-between;
}
.list_ons {
  display:flex
  margin-bottom 15px
}
.list_ons img {
  width:58px;
  height:58px;
  border-radius: 15px
}
.list_ons p {
  margin-left: 20px;
  line-height: 58px
  font-size: 18px
}
.afagaa span {
  color:#f06048;
  font-size 16px
}
</style>